<template>
  <div>
    <div class="card" :class="[cardtype]">
      <div class="icon" :class="[iconType]"></div>
      <div class="info">
        <div class="status">{{ status }}</div>
        <div class="number">{{ num }}条</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "StatusCard",
  props: ['cardType', 'idt', 'number'],
  data () {
    return {
      cardtype: this.cardType,
      status: null,
      num: this.number,
      iconType: null
    }
  },
  mounted () {
    if (this.idt === 'student') {
      switch (this.cardType) {
        case 'submitted':
          this.status = '已提交',
            this.iconType = 'icon-submitted'
          break
        case 'auditting':
          this.status = '审核中',
            this.iconType = 'icon-auditting'
          break
        case 'passed':
          this.status = '已通过',
            this.iconType = 'icon-passed'
          break
        case 'refused':
          this.status = '未通过',
            this.iconType = 'icon-refused'
          break

        default:
          break
      }
    } else {
      switch (this.cardType) {
        case 'newAdded':
          this.status = '今日新增',
            this.iconType = 'icon-newAdded'
          break
        case 'toAudit':
          this.status = '待审核',
            this.iconType = 'icon-toAudit'
          break
        case 'passed':
          this.status = '已通过',
            this.iconType = 'icon-passed'
          break
        case 'refused':
          this.status = '未通过',
            this.iconType = 'icon-refused'
          break

        default:
          break
      }
    }
  },
}
</script>
<style scoped lang="scss">
$submitted: #33cabb;
$newAdded: #33cabb;
$auditting: #faa64c;
$toAudit: #faa64c;
$passed: #16c278;
$refused: #926dde;

.card {
  width: 17vw;
  height: 190px;
  margin: 0 1rem;
  max-width: 240px;
  max-height: 90px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 13px;
  user-select: none;
}

// 已提交
.submitted {
  background-color: $submitted;
}

// 今日新增
.newAdded {
  background-color: $newAdded;
}

// 待审核
.toAudit {
  background-color: $toAudit;
}

// 审核中
.auditting {
  background-color: $auditting;
}

// 已通过
.passed {
  background-color: $passed;
}

// 未通过
.refused {
  background-color: $refused;
}

.icon {
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-submitted {
  background-image: url(https://s1.328888.xyz/2022/07/05/c4Sj.png);
}

.icon-newAdded {
  background-image: url(https://s1.328888.xyz/2022/07/05/c4Sj.png);
}

.icon-auditting {
  background-image: url(https://s1.328888.xyz/2022/07/05/c3Jm.png);
}

.icon-toAudit {
  background-image: url(https://s1.328888.xyz/2022/07/05/c3Jm.png);
}

.icon-passed {
  background-image: url(https://s1.328888.xyz/2022/07/05/chaK.png);
}

.icon-refused {
  background-image: url(https://s1.328888.xyz/2022/07/05/cBi7.png);
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;

  .number {
    font-size: 25px;
  }
}
</style>
